<template>
  <view class="container">
    <view class="layout">
      <view class="box" v-for="(item, index) in pets" :key="item._id">
        <view class="pic">
          <image
            lazy-load
            :src="item.url"
            mode="widthFix"
            @click="onPreview(index)"
          ></image>
        </view>
        <view class="text">{{ item.content }}</view>
        <view class="author">--{{ item.author }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const pets = ref([]);

const onPreview = function (index) {
  uni.previewImage({
    current: index,
    urls: pets.value.map((item) => item.url),
  });
};

function network() {
  uni.showNavigationBarLoading();
  uni
    .request({
      url: "https://tea.qingnian8.com/tools/petShow",
      method: "GET",
      data: {
        size: 10,
      },
      header: {
        "access-key": "shiqing123",
      },
    })
    .then((res) => {
      if (res.data.errCode === 0) {
        pets.value = res.data.data;
      } else if (res.data.errCode === 400) {
        uni.showToast({
          title: res.data.errMsg,
          icon: "none",
          duration: 2000,
        });
      }
    })
    .catch((err) => {
      uni.showToast({
        title: "网络错误",
        icon: "none",
      });
    })
    .finally(() => {
      uni.hideNavigationBarLoading();
    });
}
network();
</script>

<style lang="scss" scoped>
.container {
  .layout {
    padding: 50rpx;

    .box {
      margin-bottom: 60rpx;
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);

      .pic {
        image {
          width: 100%;
        }
      }

      .text {
        padding: 30rpx;
        color: #333;
        font-size: 36rpx;
      }

      .author {
        padding: 0 30rpx 30rpx;
        text-align: right;
        color: #888;
        font-size: 28rpx;
      }
    }
  }
}
</style>
